//1.定义模板字符串
//2.渲染数据
//3.渲染标题
//4.定义初始化方法来执行两个渲染
//5.调用全局方法协同left.js和right.js两个文件中的数据
(function () {
	//定义右边内容模板字符串
	var itemTmpl = '<div class="right-list-item">' +
						'<img class="item-img" src=$item-img />'+
						'<div class="item-text-info">' +
							'<div class="item-introd">' +
								'<p class="item-title">$item-title</p>'+
								'<div class="item-detail">$item-detail</div>'+
								'<div class="item-praise">$praise_content</div>'+
							'</div>'+
							'<div class="item-count">' +
								'<div class="price-info">¥$min_price<span class="price-unit">/$unit<span></div>'+
								'<div class="price-count">' +
									'<div class="subs"></div>'+
									'<div class="num-count">$chooseCount</div>'+
									'<div class="plus"></div>'+
								'</div>'+
							'</div>'+
						'</div>'+
					'</div>';

	/*
	*渲染右侧内容数据方法
	 */
	function initRightList(list) {
		$('.right-list-inner').html('');
		list.forEach(function (item,index) {
			//定义选择菜品数量,没有执行加减操作,默认赋值为0
			if (!item.chooseCount){
				item.chooseCount =0;
			}

			var str = itemTmpl.replace('$item-img',item.picture)
				.replace('$item-title',item.name)
				.replace('$item-detail',item.description)
				.replace('$praise_content',item.praise_content)
				.replace('$min_price',item.min_price)
				.replace('$unit',item.unit)
				.replace('$chooseCount',item.chooseCount);
			//转换为Jqury对象
			var $target = $(str);
			//Jqury对象挂载数据 将item数据挂载到left-item上面
			$target.data('itemData',item);

			$('.right-list-inner').append($target);

		})
	}

	/*
	*渲染右侧内容顶部标题
	 */
	function initRightTitle(str){
		$('.right-title').text(str);
	}

	/*
	* 实现右侧菜品数量加减
	* */
	function addEvent() {
		$('.price-count').on('click','.plus',function (e) {
			var count = $(e.currentTarget).parent().find('.num-count');
			//text() 方法设置或返回被选元素的文本内容。
			//返回文本内容：$(selector).text()
			//设置文本内容：$(selector).text(content)
			//使用函数设置文本内容：$(selector).text(function(index,currentcontent))

			//parseInt() 函数可解析一个字符串，并返回一个整数。
			//parseInt(count.text()||'0')转化字符串'0'和返回元素的文本内容为整数
			count.text(parseInt(count.text()||'0')+1);
			//console.log('打印增加变化过程'+count.text());
			var $item = $(e.currentTarget).parents('.right-list-item').first();

			var itemData = $item.data('itemData');

			itemData.chooseCount = itemData.chooseCount + 1;


			window.shopBar.shopBarList();

		});

		$('.price-count').on('click','.subs',function (e) {
			var count = $(e.currentTarget).parent().find('.num-count');
			//text() 方法设置或返回被选元素的文本内容。
			//返回文本内容：$(selector).text()
			//设置文本内容：$(selector).text(content)
			//使用函数设置文本内容：$(selector).text(function(index,currentcontent))

			//parseInt() 函数可解析一个字符串，并返回一个整数。
			//parseInt(count.text()||'0')转化字符串'0'和返回元素的文本内容为整数
			if (count.text() == 0) return;

			count.text(parseInt(count.text()||'0')-1);
			//console.log('打印增加变化过程'+count.text());
			var $item = $(e.currentTarget).parents('.right-list-item').first();

			var itemData = $item.data('itemData');

			itemData.chooseCount = itemData.chooseCount - 1;


			window.shopBar.shopBarList();

		});


	}

	/*
	*定义初始化方法
	 */
	function init(data) {
		initRightList(data.spus||[]);
		initRightTitle(data.name);
		addEvent();

	}

	//刷新初始化方法(window.Right定义在left.js中)
	window.Right = {
		refresh:init
	}
})();